// pages/detail/detail.js
var dateUtils = require('../../utils/Date.js')
var imageUtil = require('../../utils/Constant.js')
import Toast from '@vant/weapp/toast/toast';
const app = getApp();
Page({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    article: {}, // 文章详情
    value: '',
    flag: false, // 笼罩层评论发表
    commonentList: [], //  评论列表 ,
    top: 0, // test 坐标
    collectionFlag: true // 收藏状态 &取消状态
  },
  // 输入框
  onChange(event) {
    // event.detail 为当前输入的值
    this.setData({
      value: event.detail
    })
  },
  // 发表评论
  sbumitComment(e) {
    var articleId = this.data.article.id
    var content = this.data.value
    var that = this;
    app.http.post('tt/comment', {
      articleId: articleId,
      content: content
    }).then(res => {
      that.getDetail(articleId)
      that.setData({
        flag: false
      })
      //  清除输入框的值
      that.setData({
        value: ""
      })

    })

  },
  // 删除评论根据评论id
  // TOOD 不同的用户，显示自己的删除按钮
  deleteComment(e) {
    console.log(e)
    var commentId = e.currentTarget.dataset.id
    console.log(e.currentTarget.dataset)
    var articleId = e.currentTarget.dataset.articleid
    console.log(commentId)
    console.log(articleId)
    // 开始删除评论
    app.http.Delete1("tt/comment/" + commentId).then(res => {
      console.log(res)
      Toast.success('删除成功！');
      this.getDetail(articleId) // 刷新评论
      this.roll()
    })
  },
  // 滚动跳转
  roll() {
    var query = wx.createSelectorQuery() //创建节点查询器
    query.select('#test').boundingClientRect() //选择id为comment的节点并查询的它布局位置
    var that = this
    query.exec(function (res) { //执行请求
      var t = that.data.top
      // var top = this.data.top
      if (t == 0) {
        wx.pageScrollTo({
          scrollTop: res[0].top, //滚动到页面节点的上边界坐标
          duration: 300 // 滚动动画的时长
        });
        that.setData({
          top: res[0].top
        })
      } else {
        var top = that.data.top
        wx.pageScrollTo({
          scrollTop: top, //滚动到页面节点的上边界坐标
          duration: 300 // 滚动动画的时长
        });
      }

    })
  },
  // 触发评论笼罩层
  focusComment() {
    // 开始滚动
    this.roll();
    this.setData({
      flag: true
    })
  },
  onClose() {


    // })
    // console.log('笼罩关闭')
    this.setData({
      flag: false
    })
  },
  submitForm(e) {},
  // 跳转触发
  onLoad: function (options) { //此处接收传递过来的参数wx.navigateTo跳转时传递的参数
    // console.log(options)
    var id = options.id
    // 查询文章详情
    this.getDetail(id)
    // 埋点
    this.recordHistory(id)

  },
  // 记录用户浏览历史
  recordHistory(articleId) {
    app.http.get("tt/history/save/" + articleId).then(res => {})
  },
  clickCollection(e) {
    console.log('点击了收藏按钮')
    var articleId = this.data.article.id
    var that = this;
    app.http.get('tt/collection/save/' + articleId).then(res => {
      console.log(res)
      if (res.data == 1) { // 说明收藏成功或者是取消成功 就要修改状态
        if(that.data.collectionFlag==true){ // 说明取消收藏
          Toast.success('取消成功');
        }else{
          Toast.success('收藏成功');
        }
        that.setData({
          collectionFlag: !that.data.collectionFlag // 取反状态
        })
      }
    })

  },
  getDetail(id) {
    console.log('调用getdetail方法')
    var that = this;
    app.http.get('tt/article/getArticleDetailByArticleId/' + id, {}).then(res => {
      console.log(res)
      // that.setData({
      //   collectionFlag:res.data.
      // })
      res.data.createTime = dateUtils.relativeTime(res.data.createTime)
      var commentList = res.data.articleCommentVOList;
      for (var i = 0; i < commentList.length; i++) {
        commentList[i].createTime = dateUtils.relativeTime(commentList[i].createTime)
      }


      that.setData({
        article: res.data,
        commonentList: commentList,
        collectionFlag: res.data.collectionFlag // 设置收藏状态
      })
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */

  onShow: function () {
    // app.http.get('getInfo', {},
    //     (res) => {
    //         console.log(res)
    //     }
    // )
  },
  /**
   * 组件的方法列表
   */
  methods: {

  },

})